<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />

		<title>产品分类</title>
		<meta name="keywords" content="" />
		<meta name="description" content="" />

		<link rel="stylesheet" href="css/mui.css" />
		<link rel="stylesheet" href="css/iconfont.css" />
		<link rel="stylesheet" href="css/product.css" />
	</head>

	<body class="bgcolor12">
		<div class="contbox">
			<div class="mui-content">

				<!--logo部分-->
				<div onclick="javascript:window.location.href='index1.html'" class="mui-row">
					<div class="mui-col-xs-12 logobox clearfix">
						<img src="img/logo_04.png" /><span>健维商城</span>
					</div>
				</div>
				<!--搜索框部分-->
				<div class="mui-row" style="background: #fff;">
					<div class="mui-col-xs-12 searchbox">
						<div class="searchbox1">
							<input type="search" placeholder="搜索商品" />
							<i class="mui-icon mui-icon-search"></i>
						</div>
					</div>
				</div>
				<!--搜索框部分-->
				<!--产品内容部分-->
				<div class="mui-row">
					<div class="mui-col-xs-12 productbox clearfix">
						<!--产品内容左边部分-->
						<div class="mui-scroll-wrapper mui-scroll-wrapperss js-nav-wrap">
							<div id="scrollbox" class="mui-scroll">
								<div class="scrollnav">产品分类1</div>
								<div>产品分类2</div>
								<div>产品分类3</div>
								<div>产品分类4</div>
								<div>产品分类5</div>
								<div>产品分类6</div>
								<div>产品分类7</div>
								<div>产品分类8</div>
								<div>产品分类9</div>
								<div>产品分类10</div>
								<div>产品分类11</div>
								<div>产品分类12</div>
							</div>
						</div>
						<!--产品内容左边部分-->
						<!--产品内容右边部分-->
						<div class="productbox-right clearfix">
							<div class="shoplist1" style="display: block;">
								<div class="productboxlist">
									<img src="img/sp1_08.png" />
									<h5>产品名字1</h5>
									<div class="price clearfix">
										<span>¥331</span>
										<span>购买</span>
									</div>
								</div>
								<div class="productboxlist">
									<img src="img/sp2_08.png" />
									<h5>产品名字2</h5>
									<div class="price clearfix">
										<span>¥331</span>
										<span>购买</span>
									</div>
								</div>
								<div class="productboxlist">
									<img src="img/sp3_16.png" />
									<h5>产品名字3</h5>
									<div class="price clearfix">
										<span>¥331</span>
										<span>购买</span>
									</div>
								</div>
								<div class="productboxlist">
									<img src="img/sp4_15.png" />
									<h5>产品名字4</h5>
									<div class="price clearfix">
										<span>¥331</span>
										<span>购买</span>
									</div>
								</div>

								<!--已经到底部了-->
								<div style="clear: both;"></div>
								<div class="daodibulabox clearfix">
									<img src="img/img_10.png" />
								</div>
								<!--已经到底部了-->
							</div>
							<div class="shoplist1">
								<div class="productboxlist">
									<img src="img/sp1_08.png" />
									<h5>产品名字1</h5>
									<div class="price clearfix">
										<span>¥332</span>
										<span>购买</span>
									</div>
								</div>
								<div class="productboxlist">
									<img src="img/sp2_08.png" />
									<h5>产品名字2</h5>
									<div class="price clearfix">
										<span>¥332</span>
										<span>购买</span>
									</div>
								</div>
								<div class="productboxlist">
									<img src="img/sp3_16.png" />
									<h5>产品名字3</h5>
									<div class="price clearfix">
										<span>¥332</span>
										<span>购买</span>
									</div>
								</div>

								<!--已经到底部了-->
								<div style="clear: both;"></div>
								<div class="daodibulabox clearfix">
									<img src="img/img_10.png" />
								</div>
								<!--已经到底部了-->
							</div>
							<div class="shoplist1">
								<div class="productboxlist">
									<img src="img/sp1_08.png" />
									<h5>产品名字1</h5>
									<div class="price clearfix">
										<span>¥333</span>
										<span>购买</span>
									</div>
								</div>
								<div class="productboxlist">
									<img src="img/sp2_08.png" />
									<h5>产品名字2</h5>
									<div class="price clearfix">
										<span>¥333</span>
										<span>购买</span>
									</div>
								</div>
								<div class="productboxlist">
									<img src="img/sp3_16.png" />
									<h5>产品名字3</h5>
									<div class="price clearfix">
										<span>¥333</span>
										<span>购买</span>
									</div>
								</div>

								<!--已经到底部了-->
								<div style="clear: both;"></div>
								<div class="daodibulabox clearfix">
									<img src="img/img_10.png" />
								</div>
								<!--已经到底部了-->
							</div>
							<div class="shoplist1">
								<div class="productboxlist">
									<img src="img/sp1_08.png" />
									<h5>产品名字1</h5>
									<div class="price clearfix">
										<span>¥334</span>
										<span>购买</span>
									</div>
								</div>
								<div class="productboxlist">
									<img src="img/sp2_08.png" />
									<h5>产品名字2</h5>
									<div class="price clearfix">
										<span>¥334</span>
										<span>购买</span>
									</div>
								</div>
								<div class="productboxlist">
									<img src="img/sp3_16.png" />
									<h5>产品名字3</h5>
									<div class="price clearfix">
										<span>¥334</span>
										<span>购买</span>
									</div>
								</div>

								<!--已经到底部了-->
								<div style="clear: both;"></div>
								<div class="daodibulabox clearfix">
									<img src="img/img_10.png" />
								</div>
								<!--已经到底部了-->
							</div>
							<div class="shoplist1">
								<div class="productboxlist">
									<img src="img/sp1_08.png" />
									<h5>产品名字1</h5>
									<div class="price clearfix">
										<span>¥335</span>
										<span>购买</span>
									</div>
								</div>
								<div class="productboxlist">
									<img src="img/sp2_08.png" />
									<h5>产品名字2</h5>
									<div class="price clearfix">
										<span>¥335</span>
										<span>购买</span>
									</div>
								</div>
								<div class="productboxlist">
									<img src="img/sp3_16.png" />
									<h5>产品名字3</h5>
									<div class="price clearfix">
										<span>¥335</span>
										<span>购买</span>
									</div>
								</div>
								<div class="productboxlist">
									<img src="img/sp4_15.png" />
									<h5>产品名字4</h5>
									<div class="price clearfix">
										<span>¥335</span>
										<span>购买</span>
									</div>
								</div>

								<!--已经到底部了-->
								<div style="clear: both;"></div>
								<div class="daodibulabox clearfix">
									<img src="img/img_10.png" />
								</div>
								<!--已经到底部了-->
							</div>
							<div class="shoplist1">
								<div class="productboxlist">
									<img src="img/sp1_08.png" />
									<h5>产品名字1</h5>
									<div class="price clearfix">
										<span>¥336</span>
										<span>购买</span>
									</div>
								</div>
								<div class="productboxlist">
									<img src="img/sp2_08.png" />
									<h5>产品名字2</h5>
									<div class="price clearfix">
										<span>¥336</span>
										<span>购买</span>
									</div>
								</div>
								<div class="productboxlist">
									<img src="img/sp3_16.png" />
									<h5>产品名字3</h5>
									<div class="price clearfix">
										<span>¥336</span>
										<span>购买</span>
									</div>
								</div>
								<div class="productboxlist">
									<img src="img/sp4_15.png" />
									<h5>产品名字4</h5>
									<div class="price clearfix">
										<span>¥336</span>
										<span>购买</span>
									</div>
								</div>

								<!--已经到底部了-->
								<div style="clear: both;"></div>
								<div class="daodibulabox clearfix">
									<img src="img/img_10.png" />
								</div>
								<!--已经到底部了-->
							</div>
							<div class="shoplist1">
								<div class="productboxlist">
									<img src="img/sp1_08.png" />
									<h5>产品名字1</h5>
									<div class="price clearfix">
										<span>¥337</span>
										<span>购买</span>
									</div>
								</div>
								<div class="productboxlist">
									<img src="img/sp2_08.png" />
									<h5>产品名字2</h5>
									<div class="price clearfix">
										<span>¥337</span>
										<span>购买</span>
									</div>
								</div>
								<div class="productboxlist">
									<img src="img/sp3_16.png" />
									<h5>产品名字3</h5>
									<div class="price clearfix">
										<span>¥337</span>
										<span>购买</span>
									</div>
								</div>

								<!--已经到底部了-->
								<div style="clear: both;"></div>
								<div class="daodibulabox clearfix">
									<img src="img/img_10.png" />
								</div>
								<!--已经到底部了-->
							</div>
							<div class="shoplist1">
								<div class="productboxlist">
									<img src="img/sp1_08.png" />
									<h5>产品名字1</h5>
									<div class="price clearfix">
										<span>¥338</span>
										<span>购买</span>
									</div>
								</div>
								<div class="productboxlist">
									<img src="img/sp2_08.png" />
									<h5>产品名字2</h5>
									<div class="price clearfix">
										<span>¥338</span>
										<span>购买</span>
									</div>
								</div>
								<div class="productboxlist">
									<img src="img/sp3_16.png" />
									<h5>产品名字3</h5>
									<div class="price clearfix">
										<span>¥338</span>
										<span>购买</span>
									</div>
								</div>

								<!--已经到底部了-->
								<div style="clear: both;"></div>
								<div class="daodibulabox clearfix">
									<img src="img/img_10.png" />
								</div>
								<!--已经到底部了-->
							</div>
							<div class="shoplist1">
								<div class="productboxlist">
									<img src="img/sp1_08.png" />
									<h5>产品名字1</h5>
									<div class="price clearfix">
										<span>¥339</span>
										<span>购买</span>
									</div>
								</div>
								<div class="productboxlist">
									<img src="img/sp2_08.png" />
									<h5>产品名字2</h5>
									<div class="price clearfix">
										<span>¥339</span>
										<span>购买</span>
									</div>
								</div>

								<div class="productboxlist">
									<img src="img/sp4_15.png" />
									<h5>产品名字4</h5>
									<div class="price clearfix">
										<span>¥339</span>
										<span>购买</span>
									</div>
								</div>

								<!--已经到底部了-->
								<div style="clear: both;"></div>
								<div class="daodibulabox clearfix">
									<img src="img/img_10.png" />
								</div>
								<!--已经到底部了-->
							</div>
							<div class="shoplist1">
								<div class="productboxlist">
									<img src="img/sp1_08.png" />
									<h5>产品名字1</h5>
									<div class="price clearfix">
										<span>¥331</span>
										<span>购买</span>
									</div>
								</div>
								<div class="productboxlist">
									<img src="img/sp2_08.png" />
									<h5>产品名字2</h5>
									<div class="price clearfix">
										<span>¥332</span>
										<span>购买</span>
									</div>
								</div>
								<div class="productboxlist">
									<img src="img/sp3_16.png" />
									<h5>产品名字3</h5>
									<div class="price clearfix">
										<span>¥336</span>
										<span>购买</span>
									</div>
								</div>
								<div class="productboxlist">
									<img src="img/sp4_15.png" />
									<h5>产品名字4</h5>
									<div class="price clearfix">
										<span>¥334</span>
										<span>购买</span>
									</div>
								</div>

								<!--已经到底部了-->
								<div style="clear: both;"></div>
								<div class="daodibulabox clearfix">
									<img src="img/img_10.png" />
								</div>
								<!--已经到底部了-->
							</div>
							<div class="shoplist1">
								<div class="productboxlist">
									<img src="img/sp1_08.png" />
									<h5>产品名字1</h5>
									<div class="price clearfix">
										<span>¥336</span>
										<span>购买</span>
									</div>
								</div>
								<div class="productboxlist">
									<img src="img/sp2_08.png" />
									<h5>产品名字2</h5>
									<div class="price clearfix">
										<span>¥336</span>
										<span>购买</span>
									</div>
								</div>
								<div class="productboxlist">
									<img src="img/sp3_16.png" />
									<h5>产品名字3</h5>
									<div class="price clearfix">
										<span>¥336</span>
										<span>购买</span>
									</div>
								</div>

								<!--已经到底部了-->
								<div style="clear: both;"></div>
								<div class="daodibulabox clearfix">
									<img src="img/img_10.png" />
								</div>
								<!--已经到底部了-->
							</div>
							<div class="shoplist1">
								<div class="productboxlist">
									<img src="img/sp1_08.png" />
									<h5>产品名字1</h5>
									<div class="price clearfix">
										<span>¥331</span>
										<span>购买</span>
									</div>
								</div>
								<div class="productboxlist">
									<img src="img/sp2_08.png" />
									<h5>产品名字2</h5>
									<div class="price clearfix">
										<span>¥332</span>
										<span>购买</span>
									</div>
								</div>
								<div class="productboxlist">
									<img src="img/sp3_16.png" />
									<h5>产品名字3</h5>
									<div class="price clearfix">
										<span>¥333</span>
										<span>购买</span>
									</div>
								</div>

								<!--已经到底部了-->
								<div style="clear: both;"></div>
								<div class="daodibulabox clearfix">
									<img src="img/img_10.png" />
								</div>
								<!--已经到底部了-->
							</div>

						</div>
						<!--产品内容右边部分-->

					</div>
				</div>
				<!--产品内容部分-->
				<!--占位置高度-->
				<div style="height: 75px;"></div>
				<!--占位置高度-->
				<!--底部nav部分-->
				<nav id="navxc" class="mui-bar mui-bar-tab footernav">
					<a class="mui-tab-item ">
						<span style="font-size: 23px;margin-top: 5px;" class="mui-icon iconfont">&#xe624;</span>
						<span class="mui-tab-label">商城首页</span>
					</a>
					<a class="mui-tab-item mui-active">
						<span style="font-size: 30px;margin-top: -4px;" class="mui-icon iconfont">&#xe6ee;</span>
						<span class="mui-tab-label">产品分类</span>
					</a>
					<a class="mui-tab-item">
						<span style="font-size: 25px;" class="mui-icon iconfont">&#xe653;</span>
						<span class="mui-tab-label">个人中心</span>
					</a>
				</nav>
				<!--底部nav部分-->
			</div>
		</div>
		<script src="js/mui.js"></script>
		<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init();
			mui('.mui-scroll-wrapper').scroll({
				scrollY: true, //是否竖向滚动
				scrollX: false, //是否横向滚动
				startX: 0, //初始化时滚动至x
				startY: 0, //初始化时滚动至y
				indicators: false, //是否显示滚动条
				deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
				bounce: true //是否启用回弹
			});
			//产品类别切换
			var scrollbox = document.getElementById("scrollbox");
			var odiv = scrollbox.getElementsByTagName("div");
			var shoplist1 = document.getElementsByClassName("shoplist1");

			for(var a = 0; a < odiv.length; a++) {
				odiv[a].index = a;
				odiv[a].onclick = function() {
					for(var b = 0; b < shoplist1.length; b++) {
						odiv[b].className = '';
						shoplist1[b].style.display = 'none';
					}
					this.className = 'scrollnav';
					shoplist1[this.index].style.display = "block";

				}
			};
			//产品内容右边部分list的页面链接
			var productboxlist = document.getElementsByClassName("productboxlist");
			for(var a = 0; a < productboxlist.length; a++) {
				productboxlist[a].addEventListener('tap', function() {
					mui.openWindow({
						url: 'produc_xq.html',
						id: 'produc_xq',
						show: {
							autoShow: true, //页面loaded事件发生后自动显示，默认为true
							duration: 200, //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
							event: 'titleUpdate', //页面显示时机，默认为titleUpdate事件时显示

						}
					});
				});
			};
			//底部导航链接
			var navxc = document.getElementById("navxc");
			var hrefs = navxc.getElementsByTagName("a")
			hrefs[0].addEventListener('tap', function() {
				mui.openWindow({
					url: 'index1.html',
					id: 'index1'
				});
			});
			hrefs[1].addEventListener('tap', function() {
				mui.openWindow({
					url: 'product.html',
					id: 'product'
				});
			});
			hrefs[2].addEventListener('tap', function() {
				mui.openWindow({
					url: 'Personal.html',
					id: 'Personal'
				});
			})
		</script>
	</body>

</html>